<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格增删修改</title>
</head>
<body>
    <h1>用户信息管理</h1>
    <table >
        <thead>
            <tr>
                <td>用户名</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody id="pyy">

        </tbody>
    </table>
    <p></p>
    <h3>新增用户</h3>
    <br> 用户名：<input type="text" id="textUserName"/>
    <br> 姓名：<input type="text" id="textRealName"/>
    <br> 性别：<input type="radio" name="gender">男
                <input type="radio" name="gender">女
    <br> <input type="button"  value="保存" onclick="add()"/>
</body>
<ml>
<script>
    //定义存放用户数据的数组
    var userList=[ 
        { "username":"xiaoyi","realname":"彭于晏","gender":"男","age":18},
        { "username":"xiaoxyi","realname":"陈冠希","gender":"男","age":23}
    ];

    //定义加载数组userList数据到表格中的方法
    function loadData(){
        //遍历userLIst数组中的元素，动态向表格中tbody中
        //增加行<tr>
            var pyy = document.getElementById("pyy");
            pyy.innerHTML=""//清空表格内容
            for(var i=0;i<userList.length;i++){
                var user = userList[i];
                pyy.innerHTML += "<tr>"
                                +"<td>"+user.username+"<td>"
                                +"<td>"+user.realname+"<td>"
                                +"<td>"+user.gender+"<td>"
                                +"<td>"+user.age+"<td>"
                                +"<td>"+"<input type=\"button\" value=\"删除\" onclick=\"del("+i+")\"  >"+"<td>"
                                +"</tr>";
            }//end for
    }// end loadData

    //页面加载的时候，执行loadData
    loadData();

    //定义将录入的用户信息增加到表格中的方法
    function add(){
        var username = document.getElementById("textUserName").value;
        var realname = document.getElementById("textRealName").value;
        //1、gender的值的获得
        var gender="";
        //2、根据输入的内容值，生成新的用户对象，加入到数组userList中
        var user={"username":username,"realname":realname,"gender":gender};
        userList.push(user);
        //3、重新加载数据到表格中
        loadData();

    }
    
    //定义删除按钮的功能
    function del(i){
        if(confirm("确认删除吗？")){
        //从数组userList中，移除第i个位置的元素
        userList.splice(i,i);//删到末尾
        loadData();//刷新界面
        }
    }
</script>
